<script>
import tabNav from './tab-nav.vue'
import { h, render } from 'vue'
export default {
  components: {
    tabNav
  },
  props: {
    modelValue: Number
  },
  setup(proxy, { slots, emit }) {
    const panes = slots.default().filter(v => v.type.name === "xtx-pane")

    const handleTabClick = (pane, activeIndex) => {
      emit('update:modelValue', activeIndex)
      emit('click', pane, activeIndex)
    }
    return {
      panes, handleTabClick
    }
  },
  render(proxy) {
    if (typeof (proxy.modelValue) !== 'number') {
      throw new Error('倒是他妈传个v-model进来啊！')
    }
    const headProps = {
      onTabClick: this.handleTabClick,
      panes: this.panes,
      activeNum: proxy.modelValue
    }
    const header = (
      <div class={'xtx-tabs-header'}>
        <tab-nav ref='nav' {...headProps}></tab-nav>
      </div>
    )

    const content = (
      <div class={'xtx-tabs-container'}>
        {...this.panes}
      </div>
    )
    return h('div', { class: 'xtx-tabs' }, [h(header), h(content)])
  }
}
</script>

<style lang="less" scoped>
.xtx-tabs {
  width: 100%;
  // min-height: 200px;
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  background-color: #fff;
}
</style>
